<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" th:with="lang=${#locale.language}" th:lang="${lang}">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title th:text="${title}">metatron</title>
</head>

<body>
<table style="width:780px; margin:auto; line-height:1em;border-spacing:0px; border-collapse:separate;">
    <tr>
        <td style="height:220px; background:url('/assets/images/mail/bg_header.png') no-repeat; background-size:100% 100%;  vertical-align:top;"
            th:style="'height:220px; background:url(' + ${baseUrl} + '/assets/images/mail/bg_header.png) no-repeat; background-size:100% 100%;  vertical-align:top;'">
            <!-- header -->
            <table style="width:100%;border-spacing:0px; border-collapse:separate;">
                <tr>
                    <td style="padding:26px 0 0 33px;  vertical-align:top;">
                        <!--<img src='/app/images/mail/icon_logo.png' th:src="${baseUrl} + '/app/images/mail/icon_logo.png'" />-->
                        <img src='/assets/images/mail/icon_logo.png' th:src="${title} == 'DEURON' ? ${baseUrl} + '/assets/images/mail/icon_logo2.png' : ${baseUrl} + '/assets/images/mail/icon_logo.png'" />
                    </td>
                </tr>
                <tr>
                    <td style="padding:38px 0 25px 0; text-align:center; color:#fff; font-size:28px; font-family:Malgun Gothic,'돋움',dotum,sans-serif"
                    th:text="#{message.app.mail.welcome}">
                        Welcome
                    </td>
                </tr>
                <tr>
                    <td style="font-size:13px; color:#fff; line-height:20px; text-align:center;"
                    th:utext="#{message.app.mail.welcome.msg(${title})}">
                        to join the <span th:text="${title}">Metatron</span><br />
                        User subscription is completed as shown below. You can now log in to <span th:text="${title}">Metatron</span>
                    </td>
                </tr>
            </table>
            <!-- //header -->
        </td>
    </tr>

    <tr>
        <td style="padding:56px 90px 0 100px; color:#444; font-size:13px; font-weight:bold;"
            th:text="#{message.app.mail.userinfo}">
            User information
        </td>
    </tr>
    <tr>
        <td style="padding:5px 90px 0 90px;">
            <table style="table-layout:fixed; width:100%; border-top:1px solid #a4aab0; border-spacing:0px; border-collapse:separate;">
                <tr>
                    <th style="width:188px; padding:10px 13px; color:#444; font-size:13px; text-align:left; border-bottom:1px solid #ddd; background-color:#f9f9f9; font-weight:normal;"
                        th:text="#{message.app.mail.username}">
                        User Name
                    </th>
                    <td style="padding:10px 13px; color:#444; font-size:13px; text-align:left; border-bottom:1px solid #ddd; " th:text="${user.username}">
                        ID
                    </td>
                </tr>
                <tr>
                    <th style="width:188px; padding:10px 13px; color:#444; font-size:13px; text-align:left; border-bottom:1px solid #ddd; background-color:#f9f9f9; font-weight:normal;"
                        th:text="#{message.app.mail.email}">
                        E-Mail
                    </th>
                    <td style="padding:10px 13px; color:#444; font-size:13px; text-align:left; border-bottom:1px solid #ddd; " th:text="${user.email}">
                        E-Mail
                    </td>
                </tr>
                <tr>
                    <th style="width:188px; padding:10px 13px; color:#444; font-size:13px; text-align:left; border-bottom:1px solid #ddd; background-color:#f9f9f9; font-weight:normal;"
                        th:text="#{message.app.mail.fullname}">
                        Full Name
                    </th>
                    <td style="padding:10px 13px; color:#444; font-size:13px; text-align:left; border-bottom:1px solid #ddd; " th:text="${user.fullName}">
                        Name
                    </td>
                </tr>
                <tr>
                    <th style="width:188px; padding:10px 13px; color:#444; font-size:13px; text-align:left; border-bottom:1px solid #ddd; background-color:#f9f9f9; font-weight:normal;"
                        th:text="#{message.app.mail.phone}">
                        Phone
                    </th>
                    <td style="padding:10px 13px; color:#444; font-size:13px; text-align:left; border-bottom:1px solid #ddd; " th:text="${user.tel}">
                        Tel.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="padding:66px 0 70px 0; text-align:center;">
            <a href="/app/user/login" th:href="${baseUrl}" style="display:inline-block; padding:10px 0; width:228px; border-radius:3px; background-color:#ff8b00; color:#fff; font-size:14px; text-decoration:none; text-align:center;" th:utext="#{message.app.mail.home(${title})}">Go to <span th:text="${title}">Metatron</span></a>
        </td>
    </tr>
    <tr>
        <td style="padding:44px 0 44px 0; background-color:#ddd; text-align:center; color:#707070; font-size:12px;">
            COPYRIGHT © <span th:text="${title}">Metatron</span>. All Right Reserved.
        </td>
    </tr>

</table>
</body>
</html>
